<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}控制面板{% endblock %}</title>
    <link href="{{ url_for('static', filename='res/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='res/fontawesome/css/all.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='res/bootstrap-icons.css') }}" rel="stylesheet">
    <link rel="icon" href="{{ url_for('static', filename='res/bookgoal.ico') }}" type="image/x-icon">
    <style>
        :root {
            --tech-primary: #00a8ff;
            --tech-secondary: #192a56;
            --tech-success: #2ecc71;
            --tech-danger: #e74c3c;
            --tech-warning: #f1c40f;
            --tech-info: #3498db;
        }
        
        body {
            background-color: #f8f9fa;
            font-size: 16px;
        }

        .footer {
            border-top: 1px solid rgba(255,255,255,0.1);
            position: fixed;
            bottom: 0;
            width: 100%;
            z-index: 1000;
            background: linear-gradient(135deg, var(--tech-secondary), #1a1a2e);
            opacity: 1;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            padding: 8px 0;
        }

        main {
            padding-bottom: 120px;
            background: linear-gradient(135deg, rgba(240,248,255,0.7) 60%, rgba(0,168,255,0.10) 100%);
            border-radius: 18px;
            box-shadow: 0 4px 24px 0 rgba(0, 168, 255, 0.08), 0 1.5px 8px 0 rgba(25,42,86,0.08);
            position: relative;
            overflow: hidden;
        }        

        /* AI微光点缀 */
        main::before, main::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0.18;
        }
        main::before {
            width: 180px;
            height: 180px;
            left: -60px;
            top: -60px;
            background: radial-gradient(circle, #00a8ff 0%, transparent 80%);
            filter: blur(2px);
        }
        main::after {
            width: 120px;
            height: 120px;
            right: -40px;
            bottom: -40px;
            background: radial-gradient(circle, #2ecc71 0%, transparent 80%);
            filter: blur(2px);
        }

        .badge {
            line-height: 1.5;
            font-weight: normal;
            min-width: 140px;
            white-space: normal;
            font-size: 1rem;
            padding: 8px 12px;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }        

        .table-status th {
            font-weight: normal;
            color: rgba(255,255,255,0.7);
            padding-bottom: 0.3rem;
        }

        .table-status td {
            padding-top: 0.3rem;
        }

        .status-title {
            font-weight: bold;
            color: rgba(255,255,255,0.9);
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .py-4 {
            padding-top: 0rem !important;
            padding-bottom: 1.5rem !important;
        }

        .btn-primary, .btn-success, .btn-info, .btn-secondary {
            background: linear-gradient(135deg, var(--tech-primary) 60%, #4fd1ff 100%);
            border: none;
            color: #fff;
            box-shadow: 0 2px 8px 0 rgba(0,168,255,0.10), 0 1px 2px 0 rgba(25,42,86,0.08);
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0,0,0,0.08);
            transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
        }
        .btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-secondary:hover {
            background: linear-gradient(135deg, #0090dd 60%, #00c3ff 100%);
            box-shadow: 0 4px 16px 0 rgba(0,168,255,0.18);
            transform: translateY(-2px) scale(1.03);
        }
        .btn-danger {
            background: linear-gradient(135deg, #e74c3c 60%, #ff7675 100%);
            border: none;
            color: #fff;
            box-shadow: 0 2px 8px 0 rgba(231,76,60,0.10), 0 1px 2px 0 rgba(25,42,86,0.08);
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0,0,0,0.08);
            transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
        }
        .btn-danger:hover {
            background: linear-gradient(135deg, #c0392b 60%, #ff7675 100%);
            box-shadow: 0 4px 16px 0 rgba(231,76,60,0.18);
            transform: translateY(-2px) scale(1.03);
        }
        .btn {
            border-radius: 18px;
            padding: 8px 22px;
            font-size: 1.05rem;
            letter-spacing: 0.5px;
            outline: none;
            box-shadow: 0 1.5px 4px 0 rgba(0,0,0,0.07);
            margin: 0 2px 4px 2px;
        }
        .btn:active {
            filter: brightness(0.96);
            transform: scale(0.98);
        }
        .btn-sm {
            padding: 6px 16px;
            font-size: 0.95rem;
        }

        .navbar {
            background: linear-gradient(135deg, var(--tech-secondary), #1a1a2e) !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 1px;
        }

        .nav-link {
            font-size: 1.1rem;
            padding: 0.8rem 1rem !important;
        }

        /* 状态标签的科技感配色 */
        .bg-info {
            background-color: var(--tech-info) !important;
        }
        
        .bg-success {
            background-color: var(--tech-success) !important;
        }
        
        .bg-danger {
            background-color: var(--tech-danger) !important;
        }
        
        .bg-warning {
            background-color: var(--tech-warning) !important;
        }
    </style>
    {% block styles %}{% endblock %}
</head>
<body class="d-flex flex-column min-vh-100">
    {% block navigation %}
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="{{ url_for('static', filename='res/bookgoal.ico') }}" alt="Logo" width="36" height="36" class="d-inline-block align-text-top rounded-circle shadow" style="background: #fff; border-radius: 16px;">
                &nbsp;&nbsp;
                BK-VI-ROBOT
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <div class="navbar-nav ms-auto">
                    {% set active_page = request.endpoint %}
                    {% if session.role == 'super_user' %}
                    <a class="nav-link {% if active_page == 'main.index' %}active{% endif %}" href="{{ url_for('main.index') }}">
                        <i class="fas fa-tachometer-alt me-1"></i> 控制面板
                    </a>
                    {% endif %}
                    <a class="nav-link {% if active_page == 'main.tasks_page' %}active{% endif %}" href="{{ url_for('main.tasks_page') }}">
                        <i class="fas fa-tasks me-1"></i> 盘点任务
                    </a>
                    <a class="nav-link {% if active_page == 'main.task_logs_page' %}active{% endif %}" href="{{ url_for('main.task_logs_page') }}">
                        <i class="fas fa-clipboard-list me-1"></i> 任务日志
                    </a>
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle {% if active_page in ['routes1.photos_page', 'routes1.videos_page'] %}active{% endif %}" href="#" id="dataDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-database me-1"></i> 数据管理
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dataDropdown">
                            <li>
                                <a class="dropdown-item {% if active_page == 'routes1.photos_page' %}active{% endif %}" href="{{ url_for('routes1.photos_page') }}">
                                    <i class="fas fa-image me-1"></i> 照片管理
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {% if active_page == 'routes1.videos_page' %}active{% endif %}" href="{{ url_for('routes1.videos_page') }}">
                                    <i class="fas fa-video me-1"></i> 视频管理
                                </a>
                            </li>
                        </ul>
                    </div>
                    {% if session.role == 'super_user' %}
                    <a class="nav-link {% if active_page == 'routes1.marker_config_page' %}active{% endif %}" href="{{ url_for('routes1.marker_config_page') }}">
                        <i class="fas fa-map-marker-alt me-1"></i> 点位配置
                    </a>
                    <a class="nav-link {% if active_page == 'main.settings' %}active{% endif %}" href="{{ url_for('main.settings') }}">
                        <i class="fas fa-cog"></i> 系统
                    </a>
                    {% endif %}
                    {% if session.authenticated %}
                    <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">
                        <i class="fas fa-info-circle me-1"></i> 关于...
                    </a>
                    <a class="nav-link {% if active_page == 'main.logout' %}active{% endif %}" href="{{ url_for('main.logout') }}">
                         <i class="fas fa-sign-out-alt me-1"></i>退出 &nbsp;&nbsp;  <i class="fas fa-user me-1"></i> {{ session.username.upper() }}
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    <!-- About Modal -->
    <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aboutModalLabel">关于</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ url_for('static', filename='res/bookgoal.ico') }}" alt="Logo" width="100" height="100" class="rounded-circle shadow mb-3" style="background: white; padding: 10px;">
                    <h4>博库视觉盘点机器人</h4>
                    <h5 class="text-muted">BK-VI-ROBOT</h5>
                    <p class="mb-1">版本 1.0.0.{{ git_version }}</p>
                    <p class="text-muted">&copy; {{ current_year }} 博库智慧技术 All rights reserved.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}
    <main class="container py-4 flex-grow-1">
        {% block content %}{% endblock %}
    </main>
  
    {% block footer %}
    <footer class="footer mt-auto py-2  text-white">
        <div class="container">
            <table class="table  table-status table-sm table-borderless mb-0">
                <thead>
                    <tr>
                        <th class="text-center status-title" style="width: 13%">目标点位</th>
                        <th class="text-center status-title" style="width: 13%">执行状态</th>
                        <th class="text-center status-title" style="width: 13%">任务状态</th>
                        <th class="text-center status-title" style="width: 13%">充电状态</th>
                        <th class="text-center status-title" style="width: 13%">急停状态</th>
                        <th class="text-center status-title" style="width: 13%">电量</th>
                        <th class="text-end status-title" style="width: 22%">
                            <span id="statusTimestamp" class="me-2">-</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center">
                            <span id="moveTarget" class="badge rounded-pill bg-info px-2">N/A</span>
                        </td>
                        <td class="text-center">
                            <span id="moveStatus" class="badge rounded-pill bg-info px-2">N/A</span>
                        </td>
                        <td class="text-center">
                            <span id="runningStatus" class="badge rounded-pill bg-primary px-2">N/A</span>
                        </td>
                        <td class="text-center">
                            <span id="chargeState" class="badge rounded-pill bg-secondary px-2">未充电</span>
                        </td>
                        <td class="text-center">
                            <span id="estopState" class="badge rounded-pill bg-success px-2">正常</span>
                        </td>
                        <td class="text-center">
                            <span id="powerPercent" class="badge rounded-pill bg-success px-2">N/A</span>
                        </td>
                        <td class="text-end">
                            <button id="togglePolling" onclick="toggleStatusPolling()" class="btn btn-sm btn-success">
                                <i class="bi bi-eye-slash-fill me-1"></i>开始状态更新
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </footer>
    {% endblock %}
    <!-- Base Scripts -->
    <script src="{{ url_for('static', filename='res/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/robot-status.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const footer = document.querySelector('.footer');
            if (footer) {
                const footerHeight = footer.offsetHeight;
                document.querySelector('main').style.paddingBottom = `${footerHeight + 20}px`;
            }
        });
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>
